<!-- 
  获取子组件实例对象的情况说明:

      1. 子组件如果是 setup 语法糖的写法且没有 defineExpose 时, 则父组件啥也获取不到
      2. 子组件没有设置 expose 选项 或者 没有在 setup() 中 context.expose 对外暴露时,
         父组件获取的是子组件整个实例

  父组件是组合式写法时,如果获取 ref 标记的内容

      1. 定义一个同名的 ref 数据
      2. 记得 return 出去
      3. 组件挂载完毕之后,操作该数据即可

 -->

<template>
  <div>
    <h1 ref="h1Ref">App</h1>

    <button @click="get">GET</button>
    <hr />

    <HelloWorld ref="hwRef" />
  </div>
</template>

<script>
import { ref } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

export default {
  components: {
    HelloWorld
  },

  setup() {
    const hwRef = ref(null)
    const h1Ref = ref(null)

    console.log(hwRef.value) // null

    const get = () => {
      // console.log(this.$refs.hwRef)
      console.log(hwRef.value)

      console.log('h1Ref', h1Ref.value)
    }

    return {
      h1Ref,
      hwRef,
      get
    }
  }

  // methods: {
  //   get() {
  //     console.log(this.$refs.hwRef)
  //   }
  // }
}
</script>
